<template>
    <div>
        <!-- 头部区域 -->
        <app-header class="header"></app-header>
        <!-- 左侧导航区域 -->
        <app-navbar class="navbar">左侧导航区域</app-navbar>
        <!-- 主体部分 -->
        <app-main class="main">主体部分</app-main>
    </div>
</template>

<script>
import AppHeader from "../components/AppHeader"
import AppNavbar from "../components/AppNavbar"
import AppMain from "../components/AppMain"
export default {
 data () {
 return {
 }
 },

 components: {
     AppHeader,
     AppNavbar,
     AppMain
 },

 methods: {}
}
</script>

<style scoped>


.header{
    position:absolute;
    height: 50px;
    line-height: 50px;
    padding: 0;
    top:0px;
    left:0px;
    right: 0px;
    background-color:#2d3a4b ;
}
.navbar{
    position: absolute;
    width: 230px;
    top:50px;
    left:0;
    bottom: 0;
    overflow-y:auto;
    background-color: #545c64;
}

.main{
    position: absolute;
    top: 50px;
    left: 230px;
    overflow-y: auto;
    /* 使盒子撑满主区域 */
    right: 0;
    bottom: 0;
}
</style>